body {
    margin: 0;
    padding: 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='1990' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1048%26quot%3b)' fill='none'%3e%3cpath d='M37 1080L1117 0L1972 0L892 1080z' fill='url(%26quot%3b%23SvgjsLinearGradient1049%26quot%3b)'%3e%3c/path%3e%3cpath d='M689.6 1080L1769.6 0L1877.6 0L797.6 1080z' fill='url(%26quot%3b%23SvgjsLinearGradient1049%26quot%3b)'%3e%3c/path%3e%3cpath d='M1900 1080L820 0L-65 0L1015 1080z' fill='url(%26quot%3b%23SvgjsLinearGradient1050%26quot%3b)'%3e%3c/path%3e%3cpath d='M1195.4 1080L115.40000000000009 0L-810.0999999999999 0L269.9000000000001 1080z' fill='url(%26quot%3b%23SvgjsLinearGradient1050%26quot%3b)'%3e%3c/path%3e%3cpath d='M1118.8160640776534 1080L1920 278.81606407765344L1920 1080z' fill='url(%26quot%3b%23SvgjsLinearGradient1049%26quot%3b)'%3e%3c/path%3e%3cpath d='M0 1080L801.1839359223466 1080L 0 278.81606407765344z' fill='url(%26quot%3b%23SvgjsLinearGradient1050%26quot%3b)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1048'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1049'%3e%3cstop stop-color='rgba(5%2c 101%2c 134%2c 0.46)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(5%2c 101%2c 134%2c 0.46)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1050'%3e%3cstop stop-color='rgba(5%2c 101%2c 134%2c 0.46)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(5%2c 101%2c 134%2c 0.46)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
   
}
  
/*  Contenido inicio  */
.txt-contact{
    margin-top: 8%;
}

.txt-contact h2{
    margin-left: 5%;
    color: #056586;
    font-family:Verdana;
    font-size: 35px;
}

.txt-contact p{
    margin-left: 5%;
    font-family:Verdana;
    font-size: 13px;
}

.layout {
    width: 95%;
    height: 468px;
    margin: 1%;
    display: grid;
    grid:
      "aspel services" 1fr
      / 74% 26%;
    gap: 30px;
  }
  

  .aspel { 
    grid-area: aspel; 
   
}
  .services { 
    grid-area: services; 
}

/* Table */

#serv-tt{
    font-size: 20px;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

#tabla-container1, #tabla-container2, #tabla-container3, #tabla-container4, #tabla-container5, #tabla-container6 {
    margin-top: 1%;
    margin-left: 5%;
    overflow-x: auto;
    max-height: 0px;
    transition: max-height 0.5s ease-in-out;
}

#retraer-btn1, #retraer-btn2, #retraer-btn3, #retraer-btn4, #retraer-btn5, #retraer-btn6 {
    display: block;
    margin-top: 1%;
    margin-left: 5%;
    padding: 3px;
    background-color: #ffffff00;
    color: rgb(27, 27, 27);
    border: solid .5px #0000001a;
    cursor: pointer;
    border-radius: 5px;
}

#retraer-btn1:hover, #retraer-btn2:hover, #retraer-btn3:hover, #retraer-btn4:hover, #retraer-btn5:hover, #retraer-btn6:hover {
    background-color: #395ca863;

}

.layout1 {
    width: 95%;
    display: flex;
    gap: 0px;
     border-radius: 24px;
    border: 2px solid #E6E6E6;
    background: #FAFAF5;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  }

#retraer-btn1, #retraer-btn2, #retraer-btn3, #retraer-btn4, #retraer-btn5, #retraer-btn6{
    position: relative;
}

  .layout1:hover{
    background: rgba(0, 66, 247, 0.144);
  }
  
    .grow1 { 
        flex-grow: 0;
        margin-left: -19%; 
}
    .grow2 { 
        flex-grow: 0;
        margin-left: -6%; 
    }

    .grow3{
        margin-left: -50%;
    }

td h6{
    color: #000;
}

td a{
    text-decoration: none;
    color: #426B1F;
    font-weight: 500;
}

.ctn-services{
    padding: 5px;
    position: fixed;
    width: 22%;
    height: 60%;
    border-radius: 11px;
    border: 1px solid rgba(0, 0, 0, 0.20);
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.tittle-services{
    padding: 5%;
    color: #426B1F;
    margin-bottom: -5%;
    margin-top: 1%;
    font-weight: bold;
}

.txt-services{
    text-align: left;
}

.ctn-services a{
    text-decoration: none;
    color: #426B1F;
    font-weight: 500;
}

@keyframes moverFlecha {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(8px);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  .flecha {
    display: inline-block;
    animation: moverFlecha 1s infinite;
    margin-bottom: -100px;
  }

  
  @media screen and (min-width: 1600px) and (max-width: 1800px) {
    
    #contaE h6, #contaE p, #contaE img{
        margin-left: -45%;
    }

    #contaEI h6, #contaEI p, #contaEI img, #contaEIA h6, #contaEIA p{
        margin-left: 5%;
    }

    #contaEZ h6, #contaEZ p, #contaEZ img{
        margin-left: 17%;
    }

    img#imgEIA, img#contaEI {
        display: none;
    }

    img#IOP{
        width: 5%;
    }
    
  }

  @media screen and (min-width: 481px) and (max-width: 1250px) {
    .txt-contact{
      margin-top: 100px;
    }

    .txt-contact h2{
        font-size: 20px;
    }
    
    .txt-contact p{
        font-size: 12px;
    }

    .ctn-services{
        display: none;
    }
    
    .aspel { 
        grid-area: aspel; 
        margin-top: 10px;
    }

    .services{
        height: 10%;
    }

    #panel{
        margin-top: 0%;
        height: 100%;
    }

    #serv-tt{
        font-size: 15px;
        margin-bottom: 6%;
    }
   
    .tittle-services{
        font-size: 13px;
        margin-top: -18px;
        
    }

    p.txt-services{
        font-size: 10px;;
    }
  }


  @media screen and (min-width: 220px) and (max-width:480px) {
    .txt-contact{
      margin-top: 35%;
    }

    .txt-contact h2{
        font-size: 20px;
    }
    
    .txt-contact p{
        font-size: 12px;
    }

    .ctn-services{
        padding: 1px;
        position: absolute;
        width: 90%;
        max-height: 10%;
        margin-bottom: -10%;
        margin-left: -84.2%;
        border-radius: 11px;
        border: 1px solid rgba(0, 0, 0, 0);
        background: #ffffff00;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0), 0px 4px 4px 0px rgba(0, 0, 0, 0);
        z-index: -1;
    }

    .aspel button{
        font-size: 10px;
    }
    
    .layout {
        width: 95%;
        margin: 1%;
        display: grid;
        grid:
        "aspel services" 1fr
        / 80% 20%;
        gap: 30px;
    }
    
    .aspel { 
        grid-area: aspel; 
        margin-top: 92%;
    }

    #panel{
        margin-top: 0%;
        height: 100%;
    }

    #serv-tt{
        font-size: 15px;
        margin-bottom: 6%;
    }
   
    .tittle-services{
        font-size: 13px;
        margin-top: -18px;
        
    }

    p.txt-services{
        font-size: 10px;;
    }
  }